'use strict';

var AMR = require('amazeui-react');
var React = require('react/addons');
var Auth = require('../services/JwtAuth');

var LoginComponent = React.createClass({
	mixins: [React.addons.LinkedStateMixin],
	getInitialState: function() {
		return {user: '' , password: ''};
	},
	login: function(e)
	{
		e.preventDefault();
		Auth.login(this.state.user , this.state.password)
			.catch(function(err) {
				alert('Error!');
				console.log('Error logging in',err);
			});
	},
	render: function() {
		return (
			<AMR.Container>
				<h1>LOGIN</h1>
				<AMR.Form>
					<div class="am-form-group">
							<label htmlFor="doc-ipt-email-1">Username</label>
							<input type="email" className="" id="doc-ipt-email-1" placeholder="username" valueLink={this.linkState('user')} />
					</div>
					<div class="am-form-group">
							<label htmlFor="doc-ipt-pwd-1">Password</label>
							<input type="password" className="" id="doc-ipt-pwd-1" placeholder="password" valueLink={this.linkState('password')} />
					</div>
					<p>
						<button type="submit" className="am-btn am-btn-default" onClick={this.login.bind(this)}>Submit</button>
					</p>
				</AMR.Form>
    		</AMR.Container>
		);
	}
});

module.exports = LoginComponent;
